// dialog 相关
$dialog-top: 2vh;

// layout相关
$nav-bg-dark-heavy: #141414;
$nav-bg-dark: #222222;
$nav-bg-light: #ffffff;
$nav-text-color-light: #bbb;
$nav-text-color-dark: #222;
$header-height: 50px;
$asider-width: 200px;
$main-menu-width: 60px;
$page-tags-height: 32px;

// 间距相关
$gap-qtr: 4px;
$gap-half: 8px;
$gap: 16px;
$gap-one-half: 24px;
$gap-two: 32px;

// 主题颜色
$color-primary: #ff8000;
$color-danger: #f56c6c;
$color-info: #909399;
$color-success: #67c23a;
$color-warning: #e6a23c;

// 文本颜色
$color-text-heavyer: #000;
$color-text-heavy: #333;
$color-text-main: #666;
$color-text-light: #999;
$color-text-lighter: #ccc;

// 背景颜色
$color-bg-heavyest: mix($color-primary, #ffffff, 30%);
$color-bg-heavyer: mix($color-primary, #ffffff, 25%);
$color-bg-heavy: mix($color-primary, #ffffff, 20%);
$color-bg-main: mix($color-primary, #ffffff, 15%);
$color-bg-light: mix($color-primary, #ffffff, 10%);
$color-bg-lighter: mix($color-primary, #ffffff, 5%);
$color-bg-white: #f5f5f5;

// 边框颜色
$color-border-heavyer: #bbbbbb;
$color-border-heavy: #d2d2d2;
$color-border-main: #eeeeee; // @dcdfe6
$color-border-light: #e3e3e3;
$color-border-lighter: #eeeeee;

// 边框简写
$border-heavyer: 1px solid $color-border-heavyer;
$border-heavy: 1px solid $color-border-heavy;
$border-main: 1px solid $color-border-main;
$border-light: 1px solid $color-border-light;
$border-lighter: 1px solid $color-border-lighter;

// 边框圆角
$radius-heavyer: 12px;
$radius-heavy: 10px;
$radius-main: 8px;
$radius-light: 6px;
$radius-lighter: 4px;

// 盒子高度
$height-heavyester: 52px;
$height-heavyest: 48px;
$height-heavyer: 44px;
$height-heavy: 40px;
$height-main: 36px;
$height-light: 32px;
$height-lighter: 28px;
$height-lightest: 24px;
$height-lightester: 20px;

// 文本行高
$line-height-heavyer: 32px;
$line-height-heavy: 28px;
$line-height-main: 24px;
$line-height-light: 20px;
$line-height-lighter: 16px;

//字体大小
$font-size-heavyester: 22px;
$font-size-heavyest: 20px;
$font-size-heavyer: 18px;
$font-size-heavy: 16px;
$font-size-main: 14px;
$font-size-light: 13px;
$font-size-lighter: 12px;

// 盒子阴影
$shadow-heavy: 0 2px 6px rgba(0, 0, 0, 0.24), 0 0 8px rgba(0, 0, 0, 0.08);
$shadow-main: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

// 动画过渡
$transition-time-main: 0.3s;

// 其他渐变
$color-gradient-dark-light: #08dca2;
$color-gradient-dark-dark: #015db1;
$color-gradient-dark: linear-gradient(-30deg, $color-gradient-dark-light 0%, $color-gradient-dark-dark 100%);
$color-gradient-light: linear-gradient(135deg, #e2f7f3 0%, #dbe6f0 100%);
// 背景渐变
$color-bg-gradient-light: linear-gradient(90deg, #dbecf7 0%, #dafaf4 100%);
$color-bg-gradient-dark: linear-gradient(-30deg, $color-gradient-dark-light 0%, $color-gradient-dark-dark 100%);

// 文本省略(下面的注释不能删除，否则中间的那行代码将不会被保存编译到css文件里面）
@mixin text-ellipsis($num) {
  text-overflow: ellipsis;
  overflow: hidden;
  /*! autoprefixer: ignore next */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
}

//渐变色文字
@mixin text-gradient() {
  color: $color-primary;
  background-image: -webkit-linear-gradient(135deg, $color-gradient-dark-light 0%, $color-gradient-dark-dark 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@mixin opacity-img-box() {
  box-shadow: 0 0 16px 0px rgba(#fff, 0.2), 0 0 4px 0px rgba(#fff, 0.5);
  border: 1px solid rgba(#fff, 0.2);
  background: url() no-repeat 0 0 / cover rgba(#fff, 0.1);
}

//阴影与悬浮阴影
@mixin shadow-main() {
  box-shadow: $shadow-light;
  transition: all $transition-time-main;
  &:hover {
    box-shadow: $shadow-heavy;
  }
}

/**
* 通过before绘制三角形
* @param $position 箭头所在位置：top-left ~ bottom-right 的组合
  $at 箭头所在位置：top,right,bottom,left
  $near 在position的距离最近的位置 top,right,bottom,left
* @param $distance $near 在position的距离最近的位置$at的距离
* @param width 箭头的宽
* @param height 箭头的高
* @param bgColor 箭头的背景色
*/
@mixin triangle($position: top-right, $distance: 16px, $width: 14px, $height: 16px, $bgColor: #3b3b3b, $pseudoPosition: before) {
  $ind: str-index($position, "-");
  $at: str-slice($position, 1, $ind - 1);
  $near: str-slice($position, $ind + 1);
  &::#{$pseudoPosition} {
    position: absolute;
    #{$near}: $distance;

    @if $at == "bottom" or $at == "top" {
      #{$at}: $height * -1.65;
    } @else {
      #{$at}: $width * -1.65;
    }

    box-sizing: content-box;
    display: block;
    width: 0;
    height: 0;
    content: "";
    border-top: $width solid #{if($at == "bottom", $bgColor, transparent)};
    border-right: $width solid #{if($at == "left", $bgColor, transparent)};
    border-bottom: $width solid #{if($at == "top", $bgColor, transparent)};
    border-left: $width solid #{if($at == "right", $bgColor, transparent)};
  }
}
